<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		*{
			margin: 0;
			padding: 0;
		}
        .container{
            width: 100vw;
            height: 100vh;
            display: flex;
			background-image: url(img/image-3.jpg);
			overflow: hidden;
        }
        .left{
            height: 100%;
            flex: 8;
        }
        .right{
            height: 100%;
            flex: 4;
        }
        .login{
            width: 380px;
            height: 600px;
            border: 1px solid rgb(192,210,227,0.2);
            position: absolute;
            top: 15%;
			right:15%;
			border-radius: 3%;
			background-color:rgb(192,210,227,0.2);
			overflow: hidden;
			color: rgb(202,220,250);
			font-family: "bodoni mt condensed";
			box-shadow: 16px 16px 12px 5px rgb(192,210,227,0.2);
        }
		.hh{
			animation: 0.6s linear forwards an1;
		}
		.hh2{
			animation: 0.6s linear forwards an2;
		}
		.title{
			text-align: center;
			font-size: 50px;
			font-weight: 500;
			margin-top: 60px;
		}
		.regis{
		    width: 380px;
		    height: 600px;
		    border: 1px solid rgb(192,210,227,0.2);
		    position: absolute;
		    top: 15%;
		    right:15%;
		    border-radius: 3%;
		    background-color:rgb(192,210,227,0.2);
		    overflow: hidden;
		    color: rgb(202,220,250);
		    font-family: "bodoni mt condensed";
		    transform: rotateY(90deg);
		    box-shadow: 16px 16px 12px 5px rgb(192,210,227,0.2);
		}
		.content{
			margin-top: 20px;
			display: flex;
			width: 100%;
		}
		.c_left{
			margin-top: 20px;
			flex: 4;
			height: 160px;
			text-align: center;
			line-height: 98px;
			font-size: 30px;
		}
		.c_right{
			margin-top: 20px;
			flex: 8;
			height: 160px;
			line-height: 98px;
		}
		.c_right input{
			width: 85%;
			height: 30px;
			border: 0px solid aliceblue;
			border-radius: 3%;
			background-color: rgb(192,210,227,0.5);
			caret-color:rgb(192,210,227,0.8);
			outline: 1px rgb(192,210,227,0.7); 
			color: rgba(8, 97, 139, 0.7);
			font-size:25px;
		}
		@keyframes an1{
			0%{
				transform: rotateY(90deg);
			}
			100%{
				transform: rotateY(0deg);
			}
		}
		@keyframes an2{
			0%{
				transform: rotateY(0deg);
			}
			100%{
				transform: rotateY(90deg);
			}
		}
		.login_bu{
			width: 200px;
			height: 50px;
			background-color: rgb(192,210,227,0.5);
			text-align: center;
			font-size: 28px;
			font-family: "bodoni mt condensed";
			margin: 30% auto;
			line-height: 50px;
			border-radius: 5%;
		}
		.shift_r{
			width: 160px;
			height: 160px;
			position: absolute;
			right: 80px;
			text-align: center;
			background-color: rgb(236,249,255,0.4);
			right: -80px;
			top: -80px;
			line-height: 58px;
			font-size: 24px;
			color: darkslategray;
			font-family: "bodoni mt condensed";
			transform: rotate(-135deg);
			color: rgb(236,249,255,0.7);
		}
		.wait{
			width: 300px;
			height: 100px;
			display: flex;
			position: relative;
			top: 300px;
			left: 40%;
		}
		.wait div{
				width: 30px;
				height: 55px;
				background-color: aquamarine;
				position: absolute;
		}
		.son1{
			animation: 1s linear infinite a1;
			left: 30px;
		}
		.son2{
			animation: 1s linear infinite a2;
			left: 80px;
		}
		.son3{
			animation: 1s linear infinite a3;
			left: 130px;
		}
		.son4{
			animation: 1s linear infinite a4;
			left: 180px;
		}
		.son5{
			animation: 1s linear infinite a5;
			left: 230px;
		}
		@keyframes a1{
			0%{top: 36px;}20%{top: 0px;}40%{top: 36px;}60%{top: 36px;}80%{top: 36px;}100%{top: 36px;}
		}
		@keyframes a2{
			0%{top: 36px;}20%{top: 36px;}40%{top: 0px;}60%{top: 36px;}80%{top: 36px;}100%{top: 36px;}
		}
		@keyframes a3{
			0%{top: 36px;}20%{top: 36px;}40%{top: 36px;}60%{top: 0px;}80%{top: 36px;}100%{top: 36px;}
		}
		@keyframes a4{
			0%{top: 36px;}20%{top: 36px;}40%{top: 36px;}60%{top: 36px;}80%{top: 0px;}100%{top: 36px;}
		}
		@keyframes a5{
			0%{top: 36px;}20%{top: 36px;}40%{top: 36px;}60%{top: 36px;}80%{top: 36px;}100%{top: 0px;}
		}
		.meng{
			display: none;
			position: absolute;
			width: 100vw;
			height: 100vh;
			background-color:rgb(192,210,227,0.3);
		}
		.tishi{
			width: 150px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			opacity: 0.8;
			color: darkgreen;
			position: absolute;
			left: 40%;
			font-size: 30px;
			font-weight: 700;
			display: none;
		}
		.son6{
			animation: 1s linear infinite a6 forwards;
		}
		@keyframes a6{
			0%{top: -10px;}100%{top: 150px;}
		}
		.conTun{
			width: 260px;
			height: 200px;
			overflow: hidden;
		}
		.qu{
			width: 100%;
			text-align: center;
			font-weight: 600;
			font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			font-size: 25px;
			color: floralwhite;
			animation: infinite an9 5s;
		}
		@keyframes an9{
			0%{
				margin-left: -200px;
			}
			40%{
				margin-left: 80px;
			}
			60%{
				margin-top: -130px;
			}
			70%{
				margin-left: -20px;
			}
			80%{
				margin-top: 0px;
			}
			95%{
		    	margin-left: 180px;
		    	transform: rotateY(0deg);
			}
			100%{
		    	margin-left: -100px;
		    	transform: rotateY(90deg);
			}
		}
    </style>
</head>
<body>
	<div class="tishi">
		注册成功！
	</div>
	<div class="meng">
		<div class="wait">
			<div class="son1">
				
			</div>
			<div class="son2">
				
			</div>
			<div class="son3">
				
			</div>
			<div class="son4">
				
			</div>
			<div class="son5">
				
			</div>
		</div>
	</div>
    <div class="container">
        <div class="left">
			<div class="conTun">
				<div class="im">
					<img src="./img/Where to play_美图抠图20240416.png" alt="">
				</div>
				<div class="qu">去哪儿玩</div>
			</div>
        </div>

        <div class="right">
            <div class="login">
				<div class="shift_r">
					注册
				</div>
                <div class="title">登  录</div>
                <div class="content">
					<div class="c_left">
						<p>账号</p>
						<p>密码</p>
					</div>
					<div class="c_right">
						<p><input type="text"/></p>
						<p><input type="text"/></p>
					</div>
				</div>
				<div class="login_bu">登录
				</div>
                <div class="footer"></div>
			</div>
			<div class="regis">
			    <div class="shift_r">
			    	登录
			    </div>
			    <div class="title">注  册</div>
			    <div class="content">
			    	<div class="c_left">
			    		<p>账号</p>
			    		<p>密码</p>
			    	</div>
			    	<div class="c_right">
			    		<p><input type="text"/></p>
			    		<p><input type="text"/></p>
			    	</div>
			    </div>
			    <div class="login_bu">
			    	注册
			    </div>
			    <div class="footer"></div>
			</div>
        </div>
    </div>
	<script>
		let login=document.querySelector(".login");
		let reg=document.querySelector(".regis");
		let shift_r=document.querySelectorAll(".shift_r");
		let login_bu=document.querySelectorAll(".login_bu");
		let meng=document.querySelector(".meng");
		let tishi=document.querySelector(".tishi");
		let t=true;
		login_bu[0].addEventListener('click',()=>{
			console.log('登录中。。。');

			window.location.href="index.html";
		})
		login_bu[1].addEventListener('click',()=>{
			console.log('注册中。。。');
			meng.style.display='block';
			setTimeout(()=>{
				meng.style.display='none';
				B();
				tishi.style.display='block';
				tishi.classList.add('son6');
				setTimeout(()=>{
					tishi.style.display='none';
				},500)
			},3000)
			
		})
		shift_r[0].addEventListener('click',()=>{
			A();
		})
		shift_r[1].addEventListener('click',()=>{
			
			B();
		})
		function A(){
			login.classList.remove('hh');
			login.classList.add('hh2');
			
			setTimeout(()=>{
				reg.classList.remove('hh2');
				reg.classList.add('hh');
			},500)
		}
		function B(){
			reg.classList.remove('hh');
			reg.classList.add('hh2');
			
			setTimeout(()=>{
				login.classList.remove('hh2');
				login.classList.add('hh');
			},500)
		}
	</script>
</body>
</html>